<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/dialog.css">
</head>

<body>
    <div class="dialog" id="box">
        <div class="dialog-title" id="drop">
            <span>注册信息（可以拖曳）</span>
            <div class="dialog-close" id="close">×</div>
        </div>
        <div class="dialog-body">
        </div>
    </div>
    <script>
        //按x可以将文本框关闭
        var box = document.getElementById('box');
        var guanbi = document.getElementById('close');
        var drop = document.getElementById('drop');
        guanbi.onclick = function() {
                box.style.display = 'none';

            }
            //开始拖拽
            //(1)当我们鼠标按下,就获得鼠标在盒子内的坐标
        drop.addEventListener('mousedown', function(e) {
            var x = e.pageX - box.offsetLeft;
            var y = e.pageY - box.offsetTop;
            //(2)鼠标移动的时候,把鼠标在页面中的坐标,减去 鼠标在盒子内的坐标就是模态框的left值和top值
            document.addEventListener('mousemove', move)

            function move(e) {
                box.style.left = e.pageX - x + 'px';
                box.style.top = e.pageY - y + 'px';
            }
            //(3)鼠标弹起,就让鼠标移动事件移除
            document.addEventListener('mouseup', function() {
                document.removeEventListener('mousemove', move)
            })
        })
    </script>
</body>

</html>